<template>
  <!-- 布局 -->
  <a-layout>
    <!-- 内容 -->
    <a-layout-content
      :style="{
        background: '#fff',
        padding: '24px',
        margin: 0,
        minHeight: '280px',
      }"
    >
      <!-- 新增按钮 -->
      <p>
        <!-- 提供表单 -->
        <a-form layout="inline" :model="param">
          <a-form-item>
            <a-input v-model:value="param.name" placeholder="名称"> </a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleQuery()"> 查询 </a-button>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="add()"> 新增 </a-button>
          </a-form-item>
        </a-form>
      </p>
      <!-- 表格 columns列字段 data-source遍历的数据源 pagination分页 change更改触发的函数 -->
      <a-table
        :columns="columns"
        :data-source="categorys"
        :row-key="(record) => record.id"
        :pagination="false"
        :loading="loading"
      >
        <!-- 操作按钮 -->
        <template v-slot:action="{ text, record }">
          <a-space size="small">
            <a-button type="primary" @click="edit(record)"> 编辑 </a-button>
            <a-popconfirm
              title="删除后不可恢复，是否删除"
              ok-text="是"
              cancel-text="否"
              @confirm="handleDelete(record.id)"
            >
              <a-button type="primary" danger> 删除 </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

  <!-- 更新信息的对话框 -->
  <a-modal title="分类表单" v-model:visible="modalVisible" @ok="handleModalOk">
    <a-form
      :model="category"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
    >
      <a-form-item label="名称">
        <a-input v-model:value="category.name" />
      </a-form-item>
      <a-form-item label="父分类">
        <!-- <a-input v-model:value="category.parent" /> -->
        <a-select
          v-model:value="category.parent"
          :field-names="{ label: 'name', value: 'id' }"
          style="width: 100%"
          placeholder="请选择父分类"
          :options="categoryParents"
          :disabled="category.parent==0"
        >
        </a-select>
      </a-form-item>
      <a-form-item label="排序">
        <a-input v-model:value="category.sort" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>
      <script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { message } from "ant-design-vue";
import axios from "axios";
import { Tool } from "@/utils/tool";

export default defineComponent({
  name: "Admincategory",
  setup() {
    // -------- 表单 ---------
    const category = ref();
    category.value = {};
    const param = ref();
    param.value = {};
    const categoryParents = ref();
    const modalVisible = ref(false);
    //确定按键-提交请求
    const handleModalOk = () => {
      //发起post请求
      axios.post("/category/save", category.value).then((reps) => {
        //data
        const data = reps.data;
        //判断操作是否成功
        if (data.success) {
          modalVisible.value = false;
          message.success("信息更新成功！！");
          //重新查询数据
          handleQuery();
        } else {
          message.error("信息更新失败，请稍后再操作！！！");
        }
      });
    };
    //新增显示信息
    const add = () => {
      //清空数据
      category.value = {};
      //显示对话框
      modalVisible.value = true;
    };
    //编辑显示信息
    const edit = (record: any) => {
      //赋值
      category.value = record;
      //显示对话框
      modalVisible.value = true;
    };
    //定义categorys对象、分页对象
    const categorys = ref();
    const loading = ref(false);
    //字段列表 【标题字段】 【dataIndex-关联的变量名】
    const columns = [
      {
        title: "编号",
        dataIndex: "id",
      },
      {
        title: "名称",
        dataIndex: "name",
      },
      {
        title: "parent分类",
        dataIndex: "parentName",
      },
      {
        title: "排序",
        dataIndex: "sort",
      },
      {
        title: "Action",
        key: "action",
        slots: { customRender: "action" },
      },
    ];
    /*
     * 数据查询
     * */
    const handleQuery = () => {
      loading.value = true;
      //发起异步请求
      axios
        .get("/category/getCategoryList", {
          params: {
            name: param.value.name,
          },
        })
        .then((resp) => {
          loading.value = false;
          const data = resp.data;
          //转换为树形结构的数据
          categorys.value = [];
          categorys.value = Tool.array2Tree(data.content, 0);
          console.log("树形结构：", categorys);
        });
    };
    /*
     * 数据-删除-根据id
     * */
    const handleDelete = (id: number) => {
      //发起异步请求
      axios
        .get("/category/remove", {
          params: {
            id: id,
          },
        })
        .then((resp) => {
          //data
          const data = resp.data;
          //判断操作是否成功
          if (data.success) {
            message.success("信息删除成功！！");
            //重新查询数据
            handleQuery();
          } else {
            message.error("信息删除失败，请稍后再操作！！！");
          }
        });
    };

    //挂载完成触发的生命周期
    onMounted(() => {
      //发起category信息的查询
      handleQuery();
      //查询一级分类信息
      axios.get("/category/getParents").then((resp) => {
        const data = resp.data;
        // categoryParents
        categoryParents.value = data.content;
        // 在数组中插入一个一级分类的选项
        categoryParents.value.splice(0, 0, { id: 0, name: "一级分类" });
      });
    });
    //data返回
    return {
      categorys,
      columns,
      loading,

      modalVisible,
      edit,
      handleModalOk,
      category,
      add,
      handleDelete,

      param,
      handleQuery,

      categoryParents,
    };
  },
});
</script>
